<app-left-line
  [text]="'用户信息'"
></app-left-line>

<div class="account card">
  <div class="account-nav">
    <div class="avatar">
      <nz-avatar [nzSize]="64" nzIcon="user" 
        [nzSrc]="'assets/images/icons/me/avatar.svg'"
      ></nz-avatar>
    </div>
    <div class="user-info">
      <p>{{ userInfo.name }}</p>
      <p>{{ userInfo.mail }}</p>
    </div>
    <ul class="nav">
      <li class="nav-item" (click)="switchSetting(0)"
        [class]="{ active: currentSetting === 0 }"
      >
        <img src="assets/images/icons/me/基本信息.svg" alt="">
        <p>基本信息</p>
      </li>

      <!-- <li class="nav-item" (click)="switchSetting(1)"
        [class]="{ active: currentSetting === 1 }"
      >
        <img src="assets/images/icons/me/我的-绑定关系.svg" alt="">
        <p>其他设置</p>
      </li> -->
    </ul>
  </div>
  <div class="account-content">
    <div class="setting">
      <div class="header">
        <h6>用户设置</h6>
        <span></span>
      </div>
      <div class="content">
        <div class="item">
          <label for="">手机号</label>
          <input [disabled]="true" nz-input placeholder="" [(ngModel)]="userInfo.phone" />
          <img src="assets/images/icons/me/edit.svg" alt="" (click)="setTel()">
        </div>

        <div class="item">
          <label for="">姓名</label>
          <input [disabled]="updateItem !== 'name'" nz-input placeholder="" [(ngModel)]="userInfo.name" />
          <img src="assets/images/icons/me/edit.svg" alt=""
            *ngIf="updateItem !== 'name'"
            (click)="setAccount('name')"
          >
          <div *ngIf="updateItem === 'name'" class="update">
            <span nz-icon nzType="check" nzTheme="outline" (click)="updateUserInfo()"></span>
            <span nz-icon nzType="close" nzTheme="outline" (click)="closeSetting()"></span>
          </div>
        </div>

        <div class="item">
          <label for="">性别</label>
          <nz-select [(ngModel)]="userInfo.sex" [disabled]="updateItem !== 'sex'">
            <nz-option nzValue="0" nzLabel="男"></nz-option>
            <nz-option nzValue="1" nzLabel="女"></nz-option>
          </nz-select>
          <img src="assets/images/icons/me/edit.svg" alt=""
            *ngIf="updateItem !== 'sex'"
            (click)="setAccount('sex')"
          >
          <div *ngIf="updateItem === 'sex'" class="update">
            <span nz-icon nzType="check" nzTheme="outline" (click)="updateUserInfo()"></span>
            <span nz-icon nzType="close" nzTheme="outline" (click)="closeSetting()"></span>
          </div>
        </div>

        <div class="item">
          <label for="">电子邮箱</label>
          <input  [disabled]="updateItem !== 'mail'" [disabled]="true" nz-input placeholder="" [(ngModel)]="userInfo.mail" />
          <img src="assets/images/icons/me/edit.svg" alt=""
            *ngIf="updateItem !== 'mail'"
            (click)="setAccount('mail')"
          >
          <div *ngIf="updateItem === 'mail'" class="update">
            <span nz-icon nzType="check" nzTheme="outline" (click)="updateUserInfo()"></span>
            <span nz-icon nzType="close" nzTheme="outline" (click)="closeSetting()"></span>
          </div>
        </div>

        <!-- <div class="item">
          <label for="">实名认证</label>
          <nz-select [disabled]="true" [(ngModel)]="userInfo.certifications" >
            <nz-option nzValue="0" nzLabel="前往实名认证"></nz-option>
            <nz-option nzValue="1" nzLabel="已实名认证"></nz-option>
          </nz-select>
          <img (click)="goAuth()" src="assets/images/icons/me/edit.svg" alt="">
        </div> -->
      </div>
    </div>

    <div class="setting">
      <div class="header">
        <h6>密码设置</h6>
        <span></span>
      </div>
      <div class="content">
        <div class="item">
          <label for="">密码</label>
          <input [disabled]="true" type="password" 
          nz-input placeholder="" value="******" />
          <img src="assets/images/icons/me/edit.svg" alt="" (click)="setPassword()">
          
        </div>
      </div>
    </div>

    <!-- <div class="setting bind-setting">
      <div class="header">
        <h6>绑定设置</h6>
        <span></span>
      </div>
      <div class="content">
        <div class="item">
          <label for="">微信绑定</label>
          <img src="assets/images/icons/me/wechat.svg" alt=""
            style="margin-left: 12px;"
          >
          <span style="margin-left: 12px;color: rgba(0,0,0,.25);"
            *ngIf="userInfo.wxNo"
          >已绑定</span>

          <a style="margin-left: 12px;"
            *ngIf="!userInfo.wxNo"
          >前往绑定</a>
        </div>
      </div>
    </div> -->
    
  </div>
</div>

<nz-modal nzTitle="修改绑定手机号"
  [(nzVisible)]="setTelModal"
  [nzContent]="setTelContent"
  (nzOnCancel)="setTelCancel()"
  (nzOnOk)="setTelOk()"
  [nzOkLoading]="setTelLoading"
  [nzCancelLoading]="setTelLoading"
>

</nz-modal>
<ng-template #setTelContent>
  <div class="setTel">
    <nz-input-group nzAddOnBefore="手机号">
      <input type="text" nz-input [(ngModel)]="userInfo.phone" />
    </nz-input-group>
    <br>
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="请输入验证码" [(ngModel)]="userInfo.verificationCode" />
    </nz-input-group>
    <ng-template #suffixIconButton>
      <app-v-code [phone]="userInfo.phone"></app-v-code>
    </ng-template>
  </div>
</ng-template>

<app-reset-pwd [(nzVisible)]="resetPwdVisible"></app-reset-pwd>

<nz-modal 
  [(nzVisible)]="bindModalIsVisible" 
  (nzOnCancel)="bindModalHandleCancel()" 
  (nzOnOk)="bindModalHandleOk()"
  [nzFooter]="null"
  [nzMaskClosable]="false"
  [nzKeyboard]="false"
  [nzWidth]="320"
  [nzContent]="thirdBindTemplate"
>
</nz-modal>
<ng-template #thirdBindTemplate>
  <div class="bind-code" style="margin: auto;text-align: center;">
    <p class="PingFangSC-Regular-16">
      {{ bindType }}绑定
    </p>
  
    <div *ngIf="bindCodeStatus === 0 || bindCodeStatus === 3">
      <nz-spin [nzTip]="'二维码加载中'" [nzSize]="'large'" [nzSpinning]="isSpinning">
        <div #bindCodeImg class="bind-code-img" 
          style="display: flex;align-items: center;justify-content: center; width: 207px;height: 207px;margin: auto;background: url(assets/images/common/qr-code.png) no-repeat;">
          <img width="200" height="200" *ngIf="bindCodeSrc" [src]="bindCodeSrc" alt="">
          <p class="PingFangSC-Regular-14-65" *ngIf="bindCodeStatus === 3">二维码失效，<a (click)="refreshCode()"><i nz-icon nzType="sync" nzTheme="outline"></i> 重新获取</a></p>
  
        </div>
      </nz-spin>
      <p class="PingFangSC-Regular-14-65">使用{{ bindType }}扫描二维码进行绑定</p>
      <p *ngIf="bindCodeStatus === 3" class="PingFangSC-Semibold-16" style="cursor: pointer;" (click)="closeModal()">
        <i nz-icon nzType="check-circle" [nzTwotoneColor]="'#52C41A'" nzTheme="twotone"></i>
        我已绑定
      </p>
    </div>
  
    <div class="pay-info-success" *ngIf="bindCodeStatus === 1">
      <i nz-icon nzType="check-circle" [nzTwotoneColor]="'#52C41A'" nzTheme="twotone"></i>
      <p class="PingFangSC-Regular-16">绑定成功</p>
      <p class="PingFangSC-Regular-14-65"> <a style="cursor: pointer;" (click)="closeModal()">关闭此页面</a></p>
    </div>
  </div>
</ng-template>
